<template>
  <div>
    <div v-if="lookType === 0">
      <t-image-viewer @close="close" :visible="props.modelValue" :images="[props.imagesUrl]"> </t-image-viewer>
    </div>
    <div class="video-box" v-else-if="lookType === 1" @click="close">
      <video @click.stop="closeStop" :controls="true" class="playVideo" :src="props.imagesUrl"></video>
    </div>
    <div v-else class="video-box" @click="close">
      <div class="pdf-scroll-parent">
        <div class="pdf-scroll" @click.stop="closeStop">
          <vue-pdf-embed class="playpdf" :source="props.imagesUrl" :style="{ width: '880px', height: 'auto' }" />
        </div>
      </div>
    </div>
    <div class="close" @click="close" v-if="lookType !== 1">
      <t-icon name="close-circle" size="45" style="color: #666"></t-icon>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import VuePdfEmbed from 'vue-pdf-embed';
const lookType = ref(0);
const props = defineProps({
  modelValue: {
    type: Boolean,
  },
  imagesUrl: {
    type: String,
  },
});
if (props.imagesUrl.indexOf('.pdf') !== -1) {
  lookType.value = 2;
} else if (props.imagesUrl.indexOf('.mp4') !== -1 || props.imagesUrl.indexOf('.mp3') !== -1) {
  lookType.value = 1;
  console.log('视频预览模式');
} else {
  lookType.value = 0;
}
const closeStop = () => {};
const emit = defineEmits(['update:modelValue']);
const close = () => {
  emit('update:modelValue', false);
};
</script>

<style scoped lang="less">
.video-box {
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.3);
}
.playVideo {
  width: 800px;
  height: 480px;
  background: rgb(0, 0, 0);
}
.pdf-scroll-parent {
  width: 55vw;
  height: 60vh;
  padding: 24px;
  background: rgb(0, 0, 0);
}
.pdf-scroll {
  width: 100%;
  height: 100%;
  overflow: auto;
}
.pdf-scroll::-webkit-scrollbar {
  display: none;
}
.playpdf {
  width: 100%;
  height: 480px;
  background: rgb(0, 0, 0);
  overflow: auto;
}
.vue-pdf-embed {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 auto;
  width: 100%;
  div {
    width: 100%;
  }
  :deep(canvas) {
    width: 100%;
  }
  :deep(.textLayer) {
    width: 100%;
  }
}
.close {
  position: fixed;
  top: 4vh;
  right: 4vw;
  z-index: 99999;
  cursor: pointer;
}
</style>
